<template>
  <div class="Home">
    <HomeHeaders />
    <Swiper :swiperLists="dataList.swiperList" v-if="dataList.swiperList.length" />
    <Icons :iconLists="dataList.iconList" v-if="dataList.iconList.length" />
    <Recommend :recommendLists="dataList.recommendList" v-if="dataList.recommendList.length" />
    <Weekend :weekendLists="dataList.weekendList" v-if="dataList.weekendList.length" />
  </div>
</template>

<script>  
  import HomeHeaders from "./components/HomeHeader.vue";
  import Swiper from "./components/Swiper.vue"; 
  import Icons from "./components/Icons.vue"; 
  import Recommend from "./components/Recommend.vue"; 
  import Weekend from "./components/Weekend.vue";
  import {mapState} from "vuex";

  export default {
    name: "Home",
    data() {      
      return {        
        dataList: {
          swiperList: [],
          iconList: [],
          recommendList: [],          
          weekendList: [],
        },
        lastCity: "",
      }
    },
    computed: {
      ...mapState({city: "city"}),
    },
    components: {      
      HomeHeaders: HomeHeaders,
      Swiper: Swiper,
      Icons: Icons,
      Recommend: Recommend,
      Weekend: Weekend,
    },
    methods: {      
      homeCity() {        
        this.$axios({ 
          method: "get", 
          url: "user/text", 
          data: {
            city: this.city,
          }
        }).then(XML => {
          this.dataList.iconList = XML.data.data.iconList;
          this.dataList.recommendList = XML.data.data.recommendList;
          this.dataList.swiperList = XML.data.data.swiperList;
          this.dataList.weekendList = XML.data.data.weekendList;
        })                  
      }          
    },

    mounted() {
      this.lastCity = this.city;
      this.homeCity();
    },
    activated() {
      if(this.city !== this.lastCity) {
        this.homeCity();
      }      
    },
}
</script>

<style>
</style>